<div id="api-doc" *ngIf="doc && api && env.restEnvs">
    <div id="api-header">
        <h2 [class.deprecated]="api?.deprecated">
            <span class="api-type">REST</span>
            {{api?.name}}
        </h2>

        <div class="position-right">
            <a class="api-call-link mr-1" [routerLink]="['/doc', doc.artifact.id, 'invoke-log']" [queryParams]="{apiKey: api.key}">调用日志</a>
            <a class="api-call-link mr-1" [routerLink]="['/doc', doc.artifact.id, api.key]">返回文档</a>
            <a class="api-call-link" [routerLink]="['/doc', doc.artifact.id, api.key, 'mock']">Mock配置</a>
        </div>
    </div>

    <h3>请求</h3>
    <div id="demos" *ngIf="demos && demos.length > 0" class="position-right">
        <button class="btn mr-1" *ngIf="data.id" (click)="deleteInvokeConf()" title="删除当前调用参数"><i class="material-icons" id="delete-btn">delete_forever</i>删除配置: {{data.name}}</button>
        <span class="tips">当前可用的请求参数配置&rarr; </span>
        <app-selector name="demo" [options]="demos" keyName="id" textName="name" (selected)="selectDemo($event)"></app-selector>
        <button class="btn primary-btn" title="保存请求参数" (click)="clickSaveInvokeData()"><i class="material-icons" id="save-btn">save</i> 保存配置</button>
    </div>
    <div class="" id="invoke-url">
        <app-selector name="env" [options]="env.restEnvs" keyName="code" textName="name" [values]="[data.env]" (selected)="selectEnv($event)"></app-selector>
        <app-selector name="method" [options]="api.methods" (selected)="selectMethod($event)"></app-selector>
        <span id="invoke-url-span" [innerHTML]="data.url"></span>
        <div id="url-right-btns">
            <app-selector name="action" [options]="actions" [type]="'button'" (selected)="act($event)"></app-selector>
        </div>
    </div>
    <div class="tab" id="invoke-tab">
        <ul>
            <li *ngIf="data.pathParams && data.pathParams.length > 0" [class.active]="activeTab == 'pathParams'" (click)="setTab('pathParams')">路径参数 ({{data.pathParams.length}})</li>
            <li [class.active]="activeTab == 'params'" (click)="setTab('params')">Url参数 ({{data.params.length - 1}})</li>
            <li [class.active]="activeTab == 'headers'" (click)="setTab('headers')">请求头  ({{data.headers.length - 1}})</li>
            <li *ngIf="this.data.method=='POST'" [class.active]="activeTab == 'body'" (click)="setTab('body')">Body</li>
        </ul>
        <div *ngIf="data.pathParams && data.pathParams.length > 0" class="tab-content" id="path-params-content" [class.active]="activeTab == 'pathParams'">
            <app-invoke-request-param-table [addable]="false" [params]="data.pathParams" (tableChange)="setUrl()"></app-invoke-request-param-table>
        </div>
        <div class="tab-content" id="request-params-content" [class.active]="activeTab == 'params'">
            <app-invoke-request-param-table [params]="data.params"></app-invoke-request-param-table>
        </div>
        <div class="tab-content" id="request-headers-content" [class.active]="activeTab == 'headers'">
            <app-invoke-request-param-table [params]="data.headers"></app-invoke-request-param-table>
        </div>
        <div class="tab-content" id="request-body-content" [class.active]="activeTab == 'body'" *ngIf="this.data.method=='POST'">
            <app-invoke-request-body [data]="data" [requestBodys]="requestBodys" (dataChange)="setUrl()"></app-invoke-request-body>
        </div>
    </div>

    <app-invoke-code *ngIf="actionName=='Code'" [data]="data"></app-invoke-code>

    <div id="invoke-resp-content" *ngIf="actionName=='Send'">
        <app-invoke-response *ngIf="invokeResult" [invokeResult]="invokeResult"></app-invoke-response>
    </div>

    <app-pop-dialog [id]="'invoke-save-dialog'" [dialogDisplay]="showSaveDialog" [header]="'接口参数保存'" (dialogDisplayChange)="showSaveDialog=$event">
        <div class="row">
            <div class="col col-2 align-right"><strong>名称：</strong></div>
            <div class="col col-10"><input type="text" [(ngModel)]="editedData.name" placeholder="请输入一个浅显易懂的名称"></div>
        </div>
        <div class="row">
            <div class="col col-2 align-right"><strong>公开：</strong></div>
            <div class="col col-10">
                <label *ngFor="let publishState of publicStates">
                    <input type="radio" [(ngModel)]="editedData.publicState" name="publishState" [value]="publishState.value"> {{publishState.text}}
                </label>
                (公开后，别人也可以直接使用你的配置)
            </div>
        </div>
        <div class="row align-right button-row">
            <button class="btn mr-1" (click)="showSaveDialog=false">取消</button>
            <app-selector [type]="'button'" name="saveType" [options]="['保存', '另存为']" (selected)="saveInvokeData($event)"></app-selector>
        </div>
    </app-pop-dialog>
</div>
